import React, { ReactElement, useState, useEffect } from 'react'
import { Button, Table, Space, Modal, Input, Row, Popconfirm } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { getRestAds, addRestAds, delRestAds, getRestTypeAds, editRestAds } from '@/api/abs'
import { useAddKey } from '@/hooks'
import { connect } from 'umi'
import styles from './list.less'
import AdItem from './components/AdItem'
import EditItem from './components/EditItem'

interface Props {
    ads: any,
    addCard: Function,
    initAds: Function
}

function List({ ads, addCard, initAds }: Props): ReactElement {
    const [list, setList] = useState([])
    const [editList, setEditList] = useState([])
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isModalVisibleEdit, setIsModalVisibleEdit] = useState(false);
    const [editVal, setEditVal] = useState("")
    const [val, setVal] = useState("")
    const [id, setId] = useState("")
    const columns = [
        {
            title: '广告位名称',
            dataIndex: 'name',
            key: 'name',
            align: "center",
            render: (text: string) => {
                return <a>{text}</a>
            },
        },
        {
            title: '操作',
            key: 'action',
            align: "center",
            render: (row: any) => (
                <Space size="middle">
                    <Button type="primary" onClick={() => {
                        setIsModalVisibleEdit(true)
                        setId(row._id)
                        getRestTypeAds(row._id).then(res => {
                            setEditList(res.data.items)
                            setEditVal(res.data.name)
                        })
                    }} icon={<EditOutlined />}>
                        编辑
                    </Button>
                    <Popconfirm title="Are you sure？" onConfirm={() => {
                        delRestAds(row._id).then(res => {
                            init()
                        })
                    }} okText="Yes" cancelText="No">
                            <Button type="primary" danger icon={<DeleteOutlined />}>
                                删除
                            </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
        // 添加
        addRestAds({
            items: ads,
            name: val
        }).then(res => {
            init()
            // initAds()
            setVal("")
        })
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    // 编辑
    const handleEditOk = () => {
        editRestAds({
            id,
            name: editVal,
            items: editList
        }).then(res => {
            console.log(res)
        })

        init()

        setIsModalVisibleEdit(false);
        // 
    };
    const handleEditCancel = () => {
        setIsModalVisibleEdit(false);
    };

    useEffect(() => {
        init()
    }, [])

    const init = () => {
        getRestAds().then(res => {
            setList(useAddKey(res.data))
            initAds(useAddKey(res.data))
        })
    }
    return (
        <div>
            <div>
                <Button type="primary" onClick={showModal} icon={<PlusOutlined />}>
                    添加广告位
                </Button>
            </div>
            <Modal title="添加广告位"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                width={1000}
            >
                <div className={styles.adWarp}>
                    <span>
                        广告位名称:
                    </span>
                    <div>
                        <Input value={val} onChange={(ev) => {
                            setVal(ev.target.value)
                        }} />
                    </div>
                </div>
                <div>
                    <Button className={styles.mt15} type="primary" onClick={() => {
                        addCard()
                    }} icon={<PlusOutlined />}>
                        添加广告位信息
                    </Button>

                    <div className="site-card-wrapper">
                        <Row gutter={16}>
                            {
                                ads.map((item: any, index: number) => {
                                    return <AdItem index={index + 1} key={index} />
                                })
                            }
                        </Row>

                    </div>
                </div>
            </Modal>

            {/* 编辑弹框 */}
            <Modal title="编辑广告位"
                visible={isModalVisibleEdit}
                onOk={handleEditOk}
                onCancel={handleEditCancel}
                width={1000}
            >
                <div className={styles.adWarp}>
                    <span>
                        广告位名称:
                    </span>
                    <div>
                        <Input value={editVal} onChange={(ev) => {
                            setEditVal(ev.target.value)
                        }}/>
                    </div>
                </div>
                <div>
                    <Button 
                        className={styles.mt15} 
                        type="primary"  
                        icon={<PlusOutlined />}>
                            添加广告位信息
                    </Button>

                    <div className="site-card-wrapper">
                        <Row gutter={16}>
                            {
                                editList.map((item: any, index: number) => {
                                    return <EditItem index={index} item = { item } key={index} />
                                })
                            }
                        </Row>
                    </div>
                </div>
            </Modal>
            <Table className={styles.mt15} bordered columns={columns} dataSource={list} />
        </div>
    )
}

const mapState = (state: any) => {
    const { ads } = state
    return {
        ads
    }
}

const mapDispatch = (dispatch: Function) => {
    return {
        addCard() {
            dispatch({ type: "ads/addCard" })
        },
        initAds(items: any) {
            dispatch({ type: "ads/initAds", items })
        }
    }
}

export default connect(mapState, mapDispatch)(List)